<template>
	<div>
		<!-- 导航区 -->
		<ul>
			<li v-for="m in messageList" :key="m.id">
				<!-- to的字符串写法传参（不推荐，因为不好看） -->
				<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}/${m.content}`">{{m.title}}</router-link> -->
				
				<!-- to的对象写法传参（推荐，因为清晰） -->
				<router-link 
					:to="{
						name:'xiangqing',
						params:{
							title:m.title,
						}
					}"
				>
					{{m.title}}
				</router-link>
			</li>
		</ul>
		<hr>
		<!-- 展示区 -->
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
		name:'Message',
		data() {
			return {
				messageList:[
					{id:'76std76syuf',title:'如何一夜暴富？',content:'好好学习，干前端！'},
					{id:'u98sufd8uds',title:'北京富婆通讯录',content:'找强哥~~~~~~~~'},
					{id:'sd89fyd87gf',title:'缅甸佤邦',content:'一个去了永远回不来的地方！'}
				]
			}
		},
	}
</script>